<template>
  <div v-show="show === 1">
        <div :class="[{right:active===0},{wrong:active===1}]" class="answer">
            <ul>
                <li v-for="(item,index) in answer" :key="index" v-show="ti === index">
                    <h1>
                        {{item.a}}
                    </h1>
                    <p v-for="(_item,_index) in item.b" :key="_index">
                        <b>{{_item.aa}}</b>{{_item.bb}}
                    </p>
                </li>
            </ul>
        </div>
        <a href="###" class="next" @click="$emit('changeT',ti+1),$emit('changeS',0)">下一题</a>
  </div>
</template>

<script>
export default {
    props:['active','show','ti'],
    methods:{

    },
    data(){
        return {
            pan:0,
            answerb:[],
            answer:[
                {
                    a:'正确解答：十八大修改党章遵循的原则：',
                    b:[
                        {
                            aa:'一是',
                            bb:'坚持以马克思列宁主义、毛泽东思想、邓小平理论、“三个代表”重要思想和科学发展观为指导，把党的十八大报告确立的重大理论观点和重大战略思想写入党章。'
                        },
                        {
                            aa:'二是',
                            bb:'坚持发扬党内民主，集中全党智慧。'
                        },
                        {
                            aa:'三是',
                            bb:'保持党章总体稳定，只修改那些必须改的，在党内已经形成共识的内容。'
                        }
                    ]
                },
                {a:'正确解答：十八大报告提出，要建设学习型、服务型、创新型的马克思主义执政党，必须全面加强党的思想建设、组织建设、作风建设、制度建设和反腐倡廉建设。'}
            ]
        }
    }
}
</script>

<style>
.answer{
    width: 600px;
    height: 460px;
    margin: 30px auto 0;
    border-radius: 6px;
    background-position: -20px -20px;
    box-sizing: border-box;
    padding: 20px;
}
.right{
    background: #fbd9d8 url('../../assets/right.png')no-repeat;
    background-position: 403px 266px;
}
.wrong{
    background: #fbd9d8 url('../../assets/wrong.png')no-repeat;
    background-position: 403px 266px;
}
.answer ul{
    width: 100%;
    height: 100%;
}
.answer ul>li{
    width: 100%;
    height: 100%;
    line-height: 36px;
}
.answer ul>li>h1{
    color: #450b0c;
    margin-bottom: 12px;
    font-size: 26px;
    font-weight: normal;
}
.answer ul>li>p{
    margin-bottom: 12px;
    font-size: 26px;
    color: #d30101;
}
.answer ul>li>p>b{
    color: #450b0c;
    font-weight: normal;
}
.next{
    background: url('../../assets/dj_bg.png') no-repeat;
    width: 323px;
    margin: 0 auto;
    margin-top: 20px;
    height: 89px;
    line-height: 74px;
    color: #d22f28;
    font-size: 30px;
    text-align: center;
    display: block;
}
</style>